<template>
   <div class="syslog">
       <h4>提现列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div style="margin-bottom:14px;">
                          <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;margin-bottom:20px;">
                                用户分类：
                                 <el-select clearable v-model="classify" placeholder="请选择">
                                     <el-option label="供货商" value="1"> </el-option>
                                     <el-option label="商户"   value="2"></el-option>
                                </el-select>
                            </div>
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                提现用户：
                                <el-input clearable  v-model="withdrawUser" class="filter-input"
                                          @keyup.enter.native="searchList()">
                                </el-input>
                            </div>
                             <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                联系方式：
                                <el-input clearable
                                    v-model="linkTel" class="filter-input"
                                     @keyup.enter.native="searchList()">
                                </el-input>
                            </div>
                        
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                交易时间：
                                <el-date-picker
                                    v-model="value4"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    end-placeholder="结束日期" style="width:350px;">
                                    </el-date-picker>
                            </div>
                                <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                提现状态：
                                <el-select clearable v-model="value" placeholder="请选择">
                                        <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                </el-select>
                            </div>
                            
                            <el-button type="primary" @click="searchList()">搜索</el-button>
                    </div>           
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px;padding:30px 0 10px 0;">
            <div style="padding: 0 30px;">
              <h5 style="margin-bottom:20px;">总金额：{{countMoney}}</h5>  
              <el-table v-loading="loading" :data="data" border style="width: 100%;" ref="multipleTable" >
                 <el-table-column type="index"  width="60" label="序号" align="center" :index="formatterIndex"></el-table-column>
                  <el-table-column prop="userCategory" label="用户分类" width="140" align="center"></el-table-column>
                 <el-table-column prop="name" label="用户名" width="140" align="center"></el-table-column>
                 <el-table-column prop="tel" label="联系方式" width="160" align="center"></el-table-column>
                 <el-table-column prop="money" label="提现金额" align="center" width="100" :formatter="formaterMoney">
                 </el-table-column>
                 <el-table-column prop="addTimeStr" label="申请时间" align="center" >
                 </el-table-column>
                  <el-table-column prop="status" label="提现状态" align="center" >
                  </el-table-column>
                  <el-table-column prop="operateWay" label="提现方式" align="center">
                  </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">详情</el-button>
                </template>
                </el-table-column>
            </el-table> 
            </div>
             <div class="pagination" style="padding:20px 30px 10px 20px;border-top:1px solid #ddd;">
                <el-pagination
                     @size-change="handleSizeChange"
                    @current-change="getPageNum"
                    :page-sizes="[10, 20, 50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                 </el-pagination>
           </div>
      </div>
  </div>  
</template>

<script>
import { withdrawList,tradeList } from '@/request/api'
import  { fmoney } from '@/assets/js/common'
export default {
    data(){
        return {
           loading:true,
           data: [],
           classify:'',       // 用户分类字段
           withdrawUser:'',  // 提现用户
           linkTel:'',      // 联系方式
           value4:'',      // 交易时间
           value: '',     // 提现状态
           options: [
            {
                value: '1',
                label: '已申请'
            } , 
            {
                value: '2',
                label: '提现成功'
             }, 
             {
                value: '3',
                label: '提现失败'
             }
           ],
           total:0,
           pageNum:1,
           pageSize:10, //每页显示多少跳
           countMoney:0,//总金额
        }
    },
    created(){
         this.get_withdrawList();
    },
    // mounted(){
    //     this.get_tradeList1();
    // },
    methods:{
      //获取序号
      formatterIndex(row, column ) {
            return  this.pageSize*(this.pageNum-1) + 1 + row;
      },
      //
      formatter(row, column){
        return row.address
      },
      //当前页
      getPageNum(e){
         this.pageNum = e;
         this.get_withdrawList();
      },
      //当前页的条数
      handleSizeChange(e){
        this.pageSize = e;
        this.get_withdrawList();
      },
      //  详情页面
      handleEdit(id){
          this.$router.push({
              path:`/withdraw/withdraw_detail/${id}`
          }) 
      },
      // 获取提现列表  
      get_withdrawList(){
          withdrawList({
              name:this.withdrawUser,
              tel:this.linkTel,
              operateWay:'',
              status:this.value,
              userCategory:this.classify,
              startDate: (this.value4 && this.value4[0] ) || '',
              endDate: (this.value4 && this.value4[1]) || '',
              pageNum:this.pageNum,
              pageSize:this.pageSize
          }).then(res => {
              this.total = res.total;
              this.data = res.rows;
              this.loading = false;
            //    console.log(res);
               this.countMoney = res.countMoney;
          })
      },
        // get_tradeList1(){
        //     tradeList({
        //      operateType:this.tradeTypeVal,  // 交易类型
        //      operateWay:this.tradeWayVal,  // 交易方式
        //      tel:this.linkTel,        // 联系方式
        //      startDate: (this.tradeTime && this.tradeTime[0]) || '', // 交易开始时间
        //      endDate: ( this.tradeTime && this.tradeTime[1] ) || '',  // 交易结束时间
        //      pageNum:this.pageNum,
        //      pageSize:this.pageSize
        //   }).then(res => {
        //       this.total = res.total;
        //       this.data = res.rows;
        //       this.loading = false;
        //       this.countMoney = res.countMoney;
        //       if(this.$store.state.page > 1 && this.$route.query.detail) {
        //         // 默认 哪一个页面 高亮 显示 
        //           this.currentPage = this.$store.state.page;
        //       }
        //       console.log(res);
        //   })
        // },
      //搜索
      searchList(){
         this.get_withdrawList();
      },
      //
      formaterMoney(row,column){
         let money = fmoney(row.money,2);
         return money;
      }
    }
 }
</script>
<style  scoped>
.syslog {
        width:100%;
        height: 100%;
}
.syslog h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>